<template>
  <div class="index">
    <div class="main">
    <div class="announcement">
      公告区
      <ul>
        <li v-for="(item,index) in announceList" :key="index" v-html="item.newscontent">{{item.newscontent}}</li>
      </ul>
    </div>
    <div id="login">
      <div class="panel gray">
        <div class="title f20">登陆</div>
        <el-form :model="operForm" :rules="rules" ref="operForm">
          <el-form-item prop="teaid">
            <el-input
              v-model="operForm.teaid"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              class="input margin"
              autocomplete="off"
              @keydown.enter.native="submitForm('operForm')"
            ></el-input>
          </el-form-item>
          <el-form-item prop="passwd">
            <el-input
              type="password"
              v-model="operForm.passwd"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              class="input margin"
              autocomplete="off"
              show-password
              @keydown.enter.native="submitForm('operForm')"
            ></el-input>
          </el-form-item>
          <!-- <el-checkbox v-model="checked" checked>记住密码</el-checkbox> -->
          <el-button
            type="primary"
            class="loginSubmit margin"
            size="medium"
            round
            @click="submitForm('operForm')"
          >登录</el-button>
        </el-form>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import http from "@/plugins/http";
import Message from "@/plugins/message";
// import "@/mock/Admin";
// import "@/mock/Access";
// import "@/mock/Group";
// import "@/mock/Rule";
// import "@/mock/Announcement"
export default {
  name: "login",
  data() {
    return {
      announceList: [
      ],
      operForm: {
        teaid: "",
        passwd: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      checked:false
    };
  },
  created(){
    this.getAnnounceList();
  },
  methods: {
    getAnnounceList: function() {
      let vm = this;
      let list = [];
      axios.post("/xju/announceAll").then(function(res) {
        // console.log(res);
        const { code, msg, data } = res.data;
        if (code === 0) {
          for (let i = 0; i < data.length; i++) {
            console.log(data[i]);
            list.push(data[i]);
          }
          vm.announceList = list;
        }else{
          Message.error("请求失败");
        }
      });
    },
    submitForm: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const loginParams = {
            teaid: this.operForm.teaid,
            passwd: this.operForm.passwd,
          };
          axios({
            method:"post",
            url:"/Admin/check",
            headers:{
              'Content-type': 'application/json'
            },
            data:loginParams
          }).then(res => {
            // console.log(res);
            console.log(res);
            const {code , message, data} = res.data;
            console.log(code , message, data.data);
            let token = JSON.parse(data);
            console.log();
            if(code === 200){
              Message.success("token.token登陆成功");

              this.$store.commit("initAccount",{
                teaid: this.operForm.teaid,
                token:token.token
              });
              this.$router.push("/");
            }else{
              Message.error("登陆失败");
            }
          })
        } else {
          return false;
        }
      });
    }
  },
  mounted: function() {
    this.$store.dispatch("logout"); // for electron version
    if (this.$route.query.from === "timeout") {
      Message.error("未登陆或超时，请重新登陆");
    }
  }
};
</script>
<style scoped>
.index{
  width: 100%;
  height: 100%;
}
.main{
  /* position: absolute; */
  width: 1200px;
  height: 740px;
  /* left: calc(50% - 450px);
  height: calc(50% - ); */
  margin: auto;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
.announcement {
  box-sizing: border-box;
  /* border: 1px soid black; */
  width: 680px;
  height: 380px;
  font-size: 24px;
  border-radius: 8px;
  background: white;
  text-align: center;
  opacity: 0.8;
}
#login {
  margin: 100px;
}
.panel {
  box-sizing: border-box;
  width: 320px;
  height: 360px;
  border-radius: 8px;
  background: white;
  margin: 0 auto;
  text-align: center;
}
.title {
  padding-top: 30px;
}
.input {
  width: 280px;
}
.loginSubmit {
  width: 280px;
}
.manmenu {
  width: 280px;
}
.margin {
  margin-top: 15px;
}
/* .el-form-item >>> .el-form-item__error {
  padding: 10px 0 0 20px !important;
} */
/* @media screen and (max-width: 320px) {
  .panel {
    width: 280px;
  }
  .input {
    width: 240px;
  }
  .loginSubmit {
    width: 240px;
  }
  .manmenu {
    width: 240px;
  }
} */
</style>
